import { useStreams } from '@/lib/utils'
import services from '@/services'

/**
 * 仅在非 Observing 模式下渲染传给此组件的 children
 * 观察者模式下，只能查看，不能操作，因此不“actionable”
 * 详见 services/auth/observing.ts
 *
 * 若 strict 为 true，则只要在观察者模式就不能操作
 * 若 strict 为 false（默认），则在观察者模式的“读写模式”下可以操作，只读模式不可操作
 */
export function Actionable(props: { strict?: boolean; children: React.ReactNode }) {
  const [inObserving, readonly] = useStreams(
    services.auth.observing.in$,
    services.auth.observing.readonly$,
  )

  const strict = props.strict ?? false
  const actionable = strict ? !inObserving : !readonly

  return <>{!actionable ? null : props.children}</>
}
